<template>
  <div id="writePoint">
  <group>
      <x-textarea :max="100" placeholder="新鲜事" v-model="content" @on-focus="onEvent('focus')" @on-blur="onEvent('blur')" ref='content'></x-textarea>
  </group>
  <a href="javascript:;" class="file">
    <img src="../../../static/img/SC.png" width="40" height="40"/>
    <input name="file" type="file" id="file" accept="image/png,image/gif,image/jpeg" @change="getFile($event)" />
  </a>
  <div v-if="images.length >0" style="margin-top:3px">
    <ul>
      <li v-for="(image,key) in images">
          <img :src="image" width="80" height="80"/>
      </li>
    </ul>
  </div>
  
  <div class="fly-btn-10" @click="processButton001">发布</div>
  <toast v-model="showPositionValue" type="text" :time="1000" is-show-mask text="请退出重新发布" :position="position"></toast>
  </div>
</template>

<script>

import { Grid, XTextarea, Group, XButton, Toast } from 'vux'
import { getCustomerId } from '../utils/utils'
import { getAuthInfo } from '../utils/common'

export default {
  components: {
    Grid,
    XTextarea,
    Group,
    XButton,
    Toast
  },
  data () {
    return {
      items: [],
      content: '',
      position: 'default',
      showPositionValue: false,
      imgFile: '',
      imgFileName: null,
      images: [],
      customerId: getCustomerId()
    }
  },
  beforeRouteLeave (to, from, next) {
    console.log('离开页面')
    this.$destroy(true)
    next(true)
  },
  created: function () {
    getAuthInfo('home')
  },
  mounted: function () {
  },
  methods: {
    addPic: function (e) {
      e.preventDefault()
      var file = document.getElementById('file')
      file.click
      return false
    },
    getFile: function (event) {
      this.images = []
      this.file = event.target.files[0]
      console.log(this.file)
      this.imgFileName = this.file.name
      var reader = new FileReader()
      reader.readAsDataURL(this.file)
      var that = this
      reader.onload = function (oFREvent) {
        that.imgFile = oFREvent.target.result
        that.images.push(oFREvent.target.result)
      }
    },
    refresh: function (done) {
    },
    showPosition: function (position) {
      this.position = position
      this.showPositionValue = true
    },
    onEvent (event) {
      console.log('on', event)
    },
    processButton001 () {
      this.$vux.loading.show({text: 'Loading'})
      var txt = this.content
      console.log(this.imgFile)
      let imgFileV = this.imgFile
      let imgFileNameV = this.imgFileName
      let config = {
        headers: {'X-Requested-With': 'XMLHttpRequest', 'Content-Type': 'application/json', 'Accept': 'application/json'},
        data: {
          'pointText': txt,
          'imgFile': imgFileV,
          'imgFileName': imgFileNameV,
          'customerId': this.customerId,
          'createBy': this.customerId
        },
        responseType: 'json',
        method: 'post'
      }
      var that = this
      this.$ajax('/api/cms/home/viewpoints/add', config).then(function (response) {
        if (response.data.code === '00') {
          that.$vux.loading.hide()
          that.$router.push('/home/Index')
        } else {
          that.showPosition('top')
        }
      }).catch(function (error) {
        console.log(error)
      })
    }
  }
}
</script>

<style scoped>
.fly-btn-10{
    display:block;
    margin:auto;
    width:96%;
    height:42px;
    line-height:42px;
    text-align: center;
    border-radius:4px;
    background-color:#ff6769;
    cursor: pointer;
    color:#fff;
}
.file {
    position: relative;
    display: inline-block;
    border-radius: 4px;
    padding: 4px 12px;
    overflow: hidden;
    text-decoration: none;
    text-indent: 0;
    line-height: 20px;
}
.file input {
    position: absolute;
    font-size: 100px;
    right: 0;
    top: 0;
    opacity: 0;
}
.file:hover {
    text-decoration: none;
}
</style>
